import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { Link } from 'react-router'
import _ from 'lodash'
import moment from 'moment'
import { Table, Spin, Form, Row, Col, Input, Button, Card, Tabs } from 'antd'
import BarMap from './components/barMap'
import AreaMap from './components/areaMap'
import BarLineMap from './components/barLineMap'
import PieMap from './components/pieMap'
import HorizontalBarMap from './components/horizontalBarMap'
import FilterModule from './components/filterCitizen'

class ModuleName extends Component {
	constructor(props) {
    super(props);
    this.state = {
      search: {
        areaIds: this.props.common.user?[this.props.common.user.user.areaId]:undefined,
      }
    }
  }

  componentDidMount(){
  	
  }

  componentWillReceiveProps(nextProps){
    // console.log(this.props.common);
    if(nextProps.common.user&&nextProps.common.user.user&&!this.props.common.user){
      this.setState({
        search: Object.assign({}, this.state.search, {
          areaIds: [nextProps.common.user.user.areaId]
        })
      });
    }
  }

  fun = () => {
    
  }

  handleFilter = (option)=>{
    this.setState({
      search: Object.assign({}, this.state.search, option)
    });
  }
  
  render() {

    return (
    	<div className="visualization out-content">
        <div style={{marginBottom: 20}}>
          <FilterModule 
            handleFilter={ this.handleFilter }
          />
        </div>
        <Row gutter={30}>
          <Col span={12}>
            <Card title="人员性别统计">
              <PieMap 
                key="csex"
                search={ this.state.search }
                url="/visualization/citizen/getGenderStat"
                setClass="csex"
                headTitle="性别"
                color={['#39C558',
                        '#00b4ff',
                        '#FFBE41',
                        '#ff3e43',
                        '#937fc7',
                        '#ff8153',
                        '#4acab4']}
              />
            </Card>
          </Col>
          <Col span={12}>
            <Card title="人员民族统计">
              <PieMap 
                key="cmz"
                search={ this.state.search }
                url="/visualization/citizen/getNationStat"
                setClass="cmz"
                headTitle="民族"
                color={['#937fc7',
                        '#ff3e43',
                        '#FFBE41',
                        '#00b4ff',
                        '#39C558',
                        '#ff8153',
                        '#4acab4']}
              />
            </Card>
          </Col>
        </Row>
        <Row gutter={30}>
          <Col span={24}>
            <Card title="人员年龄结构统计">
              <BarMap 
                search={ this.state.search }
                url="/visualization/citizen/getAgeStat"
                setClass="rynljgtj"
                headTitle="年龄区间"
                color={['#ff3e43',
                        '#937fc7',
                        '#FFBE41',
                        '#00b4ff',
                        '#39C558']}
              />
            </Card>
          </Col>
        </Row>
        <Row gutter={30}>
          <Col span={24}>
            <Card title="区划人数统计">
              <BarMap 
                search={ this.state.search }
                url="/visualization/citizen/getAreaPersonStat"
                setClass="qhrstj"
                headTitle="区划"
                color={['#937fc7',
                        '#ff3e43',
                        '#FFBE41',
                        '#00b4ff',
                        '#39C558']}
              />
            </Card>
          </Col>
        </Row>
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {
    common: state.common
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({  }, dispatch)
}

module.exports = connect(mapStateToProps,mapDispatchToProps)(ModuleName)
